import { Box, Button, Image, Stack, useColorMode,   } from "@chakra-ui/react"
import { Link } from "react-router-dom"
import Logo from './assets/images/logo.png'
import { useBgColor } from "./styles"

export default function Header() {
    const mainBgColor = useBgColor()
    const { toggleColorMode } = useColorMode()
    return <Box bgColor={mainBgColor}>
        <Box h="60px" w="80%" mx="auto">
            <Image src={Logo} float="left" w="40px" mt="10px" />
            <Stack direction="row" spacing="8" align="center" h="60px" float="left" ml="8">
                <Link to="/home">首页</Link>
                <Link to="/form">表单</Link>
                <Link to="/card">卡片</Link>
            </Stack>
            <Button float="right" mt="10px" colorScheme="green" onClick={toggleColorMode}>切换模式</Button>
        </Box>
    </Box>
}

/*
header 样式
1 整体高度，
2 内容宽度
3 左，group，右
4 左，右上下居中
5 group 上下居中，间隔
6 文字颜色

*/
